<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Visualize Data</title>
        <style>
         table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td {
            padding: 5px;
            text-align: left;
        }
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            padding: 20px;
            color: #333;
        }

        input, select, button {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            background-color: #5cb85c;
            color: white;
            border: none;
            cursor: pointer;
            padding: 5px 15px;
        }
        button:hover {
            background-color: #4cae4c;
        }
        label {
            margin-right: 5px; /* Space between label and input */
        }
        .boxall {
            place-items: center; /* 简化的居中写法 */
            height: 600px;
            width: 800px;
            display: flex;        /* 使用Flexbox布局 */
            justify-content: space-around; /* 元素均匀分布 */
            align-items: center;  /* 垂直居中 */
            flex-wrap: wrap; /* Allows form fields to wrap */
            gap: 10px; /* Space between elements */
        }
        .form-container {
            display: flex;        /* 使用Flexbox布局 */
            justify-content: space-around; /* 元素均匀分布 */
            align-items: center;  /* 垂直居中 */
            padding: 10px;
            margin-top: 10px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            flex-wrap: wrap; /* Allows form fields to wrap */
            gap: 10px; /* Space between elements */
        }
        .bottom_chart_left {
            display: flex;
            flex-wrap: wrap; /* Allows form fields to wrap */
            align-items: center; /* Align items vertically in the center */
            gap: 10px; /* Space between elements */
            width: 45%;
            float: left;
            transform: translateX(50px);
        }
        .bottom_chart_right {
            display: flex;
            flex-wrap: wrap; /* Allows form fields to wrap */
            align-items: center; /* Align items vertically in the center */
            gap: 10px; /* Space between elements */
            width: 45%;
            float: right;
            transform: translateX(-50px);
        }
    </style>
    <script>
        // 在DOM加载完成后运行的函数
        window.onload = function() {
          // 获取按钮元素
          var popupButton = document.getElementById('popupButton');

          // 为按钮添加点击事件监听器
          popupButton.onclick = function() {
            // 显示alert弹窗
            alert('文件上传成功');
          };
        };
    </script>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="/static/js/echarts.min.js"></script>
    <script src="/static/js/fault_print.js"></script>
</head>


<body>
    <h2 class = form-container>故障预警模块</h2>
    <div class="form-container">
        <div>
            <input type="text" id="searchId" placeholder="输入 ID 进行搜索">
            <button onclick="searchById()">搜索</button>
            <button onclick="fetchPredictions()">展示预测结果</button>
        </div>
        <div>
            <form enctype="multipart/form-data">
            <label>上传历史数据(CSV):</label>
            <input type="file" name="file" required>
            <button id="popupButton">上传文件</button>
        </form>
        </div>
        <div>
            <input type="number" id="thresholdInput" placeholder="输入阈值">
            <button onclick="fetchPredictions()" >展示故障占比</button>
        </div>

    </div>
    <div class="form-container">
        <div class="boxall" id="falutprint"></div>
    </div>>
    <!-- <div class="bottom_chart_right" id="falutprint"></div>
    <div class="bottom_chart_left" id="falutprint"></div>
    <div class="bottom_chart_right" id="falutprint"></div> -->

</body>
</html>
